<template>
  <div class="loginPage">
    <img :src="appLogo" alt="">
    <div class="loginPageInner">
      <div class="title">邮箱登录</div>
      <van-form
        :colon="false"
        :required="true"
        :label-width="40"
        @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="username"
            label="邮箱"
            placeholder="邮箱"
            :rules="[{ required: true, message: '请输入邮箱' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin-top: 16px;">
          <van-button
            :loading="loading"
            loading-text="登录中..."
            color="#ffc600"
            round
            block
            type="primary"
            native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script setup>
import appLogo from '@/assets/image/appLogo.png';
import { loginAppleId } from "@/api/homePage.js";
import { setToken } from "@/utils/auth.js";
import { showNotify } from 'vant';
import { useUserStore } from '@/stores/user.js'

import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const { id } = route.query;

//登录
const store = useUserStore()
const username = ref('123');
const password = ref('123');
const loading = ref(false);
const onSubmit = (values) => {
  loading.value = true;
  loginAppleId(values).then(res => {
    loading.value = false;
    const { code, token } = res;
    if (code === 200) {
      setToken(token);
      store.SET_TOKEN(token);
      showNotify({ type: 'success', message: '登录成功' });
      router.push({
        name: 'merchantDetailPage',
        query: { id }
      });
    }
  })
};

</script>
<style scoped lang="less">
div.loginPage {
  width: 100%;
  height: 100%;
  background: #ffc600;
  position: relative;
  overflow: hidden;
  img {
    width: 100px;
    height: 100px;
    display: block;
    margin: 100px auto 150px;
  }
  div.loginPageInner {
    width: 100%;
    height: calc(100% - 250px);
    padding-top: 20px;
    padding-right: 32px;
    padding-bottom: 20px;
    padding-left: 32px;
    box-sizing: border-box;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background: #ffffff;
    z-index: 999;
    position: absolute;
    top: 250px;
    left: 0;
    >div.title {
      margin-bottom: 40px;
      font-size: 28px;
      font-weight: bold;
      color: #0A0708;
    }
    .van-cell-group {
      margin: 0;
      background: unset !important;
    }
    .van-field {
      background: #F5F5F5!important;
      border-radius: 12px!important;
      &:not(:last-child) {
        margin-bottom: 12px;
      }
    }
  }
}
</style>
